<template>
  <div class="animate__animated animate__fadeInRight animate__delay-0.5s">
    <div class="logobox">
      <img src="/logo.png" alt="" />
    </div>
    <p style="text-align: center;font-size: 1.5rem;height: 3.5rem;">欢迎使用</p>
    <div class="boxs">
        <div class="boox" >
            <img src="/wechat.png" alt="">
            <span>使用 微信 登录</span>
        </div>
        <div class="boox">
            <img src="/pay.png" alt="">
            <span>使用 支付宝 登录</span>
        </div>
        <div class="boox" @click="router.push('/phone')">
            <img src="/phone.png" alt="">
            <span>使用 手机号 登录</span>
        </div>
        <div class="boox">
            <img src="/apple.png" alt="">
            <span>使用 Apple 登录</span>
        </div>
    </div>
    <p style="text-align: center;font-size: 1rem;color:gray;margin-top: 0.5rem;">或</p>
    <p style="text-align: center;">
        <button class="pwdbtn" @click="router.push('/login')">使用密码登录</button>
    </p>
    <p style="text-align: center;margin-top:6rem;font-size: 0.9rem;">
        <span @click="router.push('/createuser')">没有账户？</span><span style="color:#ffb900" @click="router.push('/createuser')">注册</span>
    </p>
    
  </div>
</template>

<script lang="ts" setup>
import {useRouter} from 'vue-router'
import 'animate.css';
const router = useRouter()



</script>

<style lang="scss" scoped>
.logobox{
    width:7rem;
    height: 6.5rem;
    margin: 0 auto;
    margin-top: 3rem;
    img{
        width: 100%;
        height: 100%;
    }
}
.boxs{
   width:85vw;
   height:32vh;
   margin:auto;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
    div{
        width: 100%;
        height: 2.5rem;
        border:1px solid #d0d0d0;
        border-radius: 0.3rem;
    }
}
.pwdbtn{
    width: 85vw;
    height: 3rem;
    margin: 0 auto;
    margin-top: 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: #ffb900;
    color: white;
    font-size: 1.2rem;
}
.boox{
    display:flex;
    align-items: center;
    padding: 0.2rem ;
    span{
        font-size:1rem;
        margin-left: 4rem;
    }
    img{
        width:2.3rem;
        height: 2.1rem;
        margin-left: 1rem;
        margin-right: 0.5rem;
    }
}
</style>